<template>
<div>
  <validator name="newEmailForm">
    <form role="form" name="Form" class="col-md-8 col-md-offset-2 form-margin">
      <div class="form-group">
        <label for="newEmail">邮箱地址</label>
        <input type="text" autocomplete="off" class="form-control" id="newEmail" initial="off" detect-change="off" v-validate:new-email="['required', 'email']" v-model="state.newEmail" placeholder="请输入新的安全邮箱地址">
        <div>
          <error-template v-show="$newEmailForm.newEmail.required">{{$newEmailForm.newEmail.required}}</error-template>
          <error-template v-show="$newEmailForm.newEmail.email&&!$newEmailForm.newEmail.required">{{$newEmailForm.newEmail.email}}</error-template>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="请输入验证码"  v-model="state.imgCode" initial="off" detect-change="off" v-validate:img-code="['required']">
          <span class="input-group-btn">
            <img-check-code></img-check-code>
          </span>
        </div>
        <div>
          <error-template v-show="$newEmailForm.imgCode.required">{{$newEmailForm.imgCode.required}}</error-template>
        </div>
      </div>
      <button class="btn btn-primary pull-right" v-on:click.prevent="validEmail">下一步</button>
    </form>
  </validator>
</div>
</template>
<script>
/**
 * @author guocailee
 */

import imgCheckCode from 'components/ImgCheckCode.vue'
import { checkImgCode, checkUser } from 'src/api/check'
export default {
  props: {
    state: {
      required: true,
      type: Object
    }
  },
  components: {
    imgCheckCode
  },
  methods: {
    validEmail() {
      let self = this
      self.$validate(true, () => {
        if (self.$newEmailForm.invalid) {
          return
        }
        checkImgCode(self.state.imgCode)
        .then(data => checkUser(self.state.newEmail))
        .then(data => {
          self.$dispatch('sendmailbindcaptcha')
          self.$dispatch('nexStep')
        }).catch(data => {
          self.$notify({
            message: data,
            type: 'error'
          })
        })
      })
    }
  }
}
</script>